<template>
  <div id="seachmusic" ref="ref_seachmusic">
    <ol>
      <li v-for="(item, i) in seachtypename" :key="i" @click="getbtnnub(item.path,item.type,item.offset)">
        {{ item.name }}
      </li>
    </ol>

   <keep-alive>
      <!-- 判断router里对应的meta的keepalive是否为ture -->
      <router-view v-if="$route.meta.keepAlive" @set_scrolltop="set_top()"></router-view>
    </keep-alive>
       <router-view v-if="!$route.meta.keepAlive"></router-view>


  </div>
</template>

<script>


export default {
  name: "SeachMusic",
  data() {
    return {
      
      //seach的模块路由值
      seachtypename: {
        SongSingle: { path:'SongSingle', name:"歌曲", type:1, offset:0},
        SeachPlayList: { path:'SeachPlayList', name:"歌单", type:1000, offset:0},
        SeachSinger: { path:'SeachSinger', name:"歌手", type:100, offset:0},
        SeachAlbum: { path:'SeachAlbum', name:"专辑", type:10, offset:0},
        SeachMV: { path:'SeachMV', name:"视频", type:1014, offset:0},
      },
    };
  },
  methods: {
    /*
    // @getbtnnub(路径，搜索类型，页数)
    */
    getbtnnub(path,type,offset) {
      this.$router.push({
        path,
        query: {
          type,
          offset,
          keywords: this.$route.query.keywords
        }
      })
      .catch(err => err)
    },
    //置顶操作
    set_top() {
      this.$refs.ref_seachmusic.scrollTop = 0
    }
  },
};
</script>

<style>
#seachmusic {
  height: 59vh;
  overflow: auto;
}
#seachmusic li {
  list-style: none;
  display: inline;
  margin: 0 1.5rem;
}
#seachmusic li:hover {
  cursor: pointer;
}
</style>